<template>
	<view class="entrepreneurship-detail-page page">
		<swiper :indicator-dots="false" class="top-banner" :autoplay="true">
			<swiper-item v-for="(item,index) in detail.swiperImages" :key="index" >
				<image class="banner-item" :src="item"></image>
			</swiper-item>
		</swiper>
		<view class="content-block">
			<view class="white-block title-block">
				<view class="name">{{detail.title}}</view>
				<view class="label">{{detail.label}}</view>
			</view>
			<view class="white-block" style="padding: 0 20rpx;">
				<view class="info-item">
					<view style="font-size: 42rpx;" class="iconfont icon-dianhua1"></view>
					<view class="info-value">{{detail.phone||'暂无联系方式'}}</view>
					<view v-if="detail.phone" @click="call(detail.phone)" class="operate-btn">
						<view class="iconfont iconfont-btn icon-dianhua"></view>拨打
					</view>
				</view>
				<view class="info-item">
					<view class="iconfont icon-dingxiang"></view>
					<view class="info-value">{{detail.address||'暂无位置'}}</view>
					<view v-if="detail.address" @click="openMap(detail.latitude,detail.longitude,detail.address)" class="operate-btn">
						<view class="iconfont iconfont-btn icon-daohang"></view>地图
					</view>
				</view>
			</view>
			<view class="white-block">
				<view class="block-title FZHZGBJ">简介</view>
				<view class="content">{{detail.introduction||'暂无简介'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {entrepreneurshipDetail} from '@/api/entrepreneurship'
	export default{
		data(){
			return{
				detail:{
					swiperImages:[],
					title:'',
					label:'',
					phone:'',
					address:'',
					latitude:null,
					longitude:null,
					introduction:''
				}
			}
		},
		methods:{
			getDetail(id){
				entrepreneurshipDetail({id}).then(res=>{
					this.detail=res;
				}).catch(()=>{
					this.showToast('获取信息失败',()=>{
						uni.navigateBack()
					})
				})
			}
		},
		onLoad(opt) {
			if(!opt.id){
				this.showToast('参数错误',()=>{
					uni.navigateBack()
				})
			}
			this.getDetail(opt.id)
		}
	}
</script>

<style lang="scss" scoped>
	.entrepreneurship-detail-page{
		width: 100%;
		overflow: hidden;
		.top-banner{
			width: 100%;
			height: 500rpx;
			.banner-item{
				width:100%;
				height: 100%;
			}
		}
		.content-block{
			background: #F7F6F9;
			border-radius: 20px;
			padding: 30rpx;
			margin-top: -60rpx;
			z-index: 1;
			position: relative;
			.white-block{
				background: #fff;
				border-radius: 8px;
				padding: 30rpx 20rpx;
				display: flex;
				flex-direction: column;
				margin-bottom: 30rpx;
				.info-item{
					border-bottom: 1px solid #efefef;
					height: 100rpx;
					display: flex;
					align-items: center;
					.info-value{
						width: calc(100% - 230rpx);
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
					.iconfont{
						font-weight: bold;
						color: #000;
						width: 50rpx;
						font-size: 38rpx;
						margin-right: 20rpx;
					}
					.operate-btn{
						width: 160rpx;
						border-radius: 20px;
						border: 1px solid $theme-color;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: $theme-color;
						.iconfont-btn{
							font-size: 34rpx;
							margin-right: 10rpx;
							width: auto;
							color: $theme-color;
						}
					}
				}
				.info-item:last-child{
					border-bottom: none;
				}
				.block-title{
					margin-bottom: 20rpx;
				}
				.content{
					line-height: 1.6;
					text-align: justify;
				}
			}
			.white-block.title-block{
				justify-content: center;
				.name{
					font-size: 34rpx;
					font-weight: bold;
				}
				.label{
					margin-top: 30rpx;
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
</style>